正文：
今天來介紹 form 表單吧

<el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="left" >
    <el-form-item label="活動區域" prop="area">
        <el-input v-model="form.area" placeholder="請輸入活動區域"></el-input>
    </el-form-item>
    <el-form-item prop="name">
        <div slot="label">
            <span>活動名稱</span>
            <el-input v-model="form.name" placeholder="請輸入活動名稱"></el-input>
        </div>
    </el-form-item>
    <el-button @click="submitForm()">送出</el-button>
</el-form>

先來介紹 ref 屬性，在 vue 當中，我們可以為子組件設置 ref 屬性而後在父組件通過 this.$refs.refName 來調用子元件的方法和屬性
而在 el-form 中添加的 model 屬性是為了將 vue data 中的資料對應上來，並在 el-form-item 中設置 prop 屬性，屬性值為該欄位需要驗證的規則
而 rules 為該表單需要驗證的規則，下方為範例

data(){
    let areaValid = (rule,value,callback) => {
        if(value.trim().length==0){
            callback(new Error("活動區域不得為空"));
        }else{
            callback();
        }
    };
    let nameValid = (rule,value,callback) => {
        if(value.tirm().length==0){
            callback(new Error("活動名稱不得為空"));
        }else{
            callback();
        }
    }
    return{
    area: '',
    name: '',
    rules: {
        area: [{validator: areaValid, trigger: 'blur'}],
        name: [{validator: nameValid, trigger: 'blur'}]
    }
    }
},
methods: {
    submitForm: function(){
        this.$refs.form.validate((valid) => {
            if(valid){
                alert("submit");
            }else{
                alert("error submit");
            }
        })
    }
}

繼續介紹 el-form 屬性，label-position 可以控制 label 的放置位置， label-width 可以控制 label 的寬度，並且當 label-position 設置成 left 或 right 時 label-width 為必填